<template>
  <view class="matchItem">
    <view class="flex flex-direction-row align-center justify-between">
      <view class="flex align-center justify-start flex-direction-row">
        <view class="gameLogo"><image class="gameLogoImage" :src="gameLogo"></image></view>
        <text class="matchName">{{ matchName }}</text>
      </view>
      <view class="follow">
        <text class="followBtn followBtned" @click.stop="onCancelFollow" v-if="isFollowed">取消关注</text>
        <text class="followBtn followBtning" @click.stop="onFollow" v-else>+ 关注</text>
        <text class="followTotal">+{{ followTotal }}</text>
      </view>
    </view>
    <view class="body flex justify-between align-center flex-direction-row">
      <view class="teamLogo"><image class="teamLogoImage" :src="teamALogo"></image></view>
      <view class="teamInfo flex justify-around align-center">
        <text class="teamName">{{ teamAName }}</text>
        <slot name="matchTime">
          <text class="matchTime">{{ matchTime | dateFormat("HH:mm") }}</text>
        </slot>
        <text class="teamName">{{ teamBName }}</text>
      </view>
      <view class="teamLogo"><image class="teamLogoImage" :src="teamBLogo"></image></view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isFollowed: {
      type: Boolean,
      default: false
    },
    followTotal: {
      type: Number,
      default: 0
    },
    matchId: Number,
    gameLogo: String,
    matchName: String,
    matchTime: Number,
    teamAName: String,
    teamALogo: String,
    teamBName: String,
    teamBLogo: String
  },
  methods: {
    onCancelFollow() {
      this.$api.video.cancelFollow(this.matchId).then(_ => {
        this.$emit("update:isFollowed", false);
        this.$emit("update:followTotal", this.followTotal - 1);
      });
    },
    onFollow() {
      this.$api.video.follow(this.matchId).then(_ => {
        this.$emit("update:isFollowed", true);
        this.$emit("update:followTotal", this.followTotal + 1);
      });
    }
  }
};
</script>

<style lang="scss">
.matchItem {
  background-color: #f3f3f3;
  padding: 10rpx;
  border-radius: 8upx;
}
.gameLogo {
  width: 30rpx;
  height: 30rpx;
  border-radius: 30rpx;
  background-color: #eeeeee;
  overflow: hidden;
  margin-right: 5rpx;
}
.gameLogoImage {
  width: 30rpx;
  height: 30rpx;
}
.matchName {
  color: #000000;
  font-size: 26rpx;
}
.followBtn,
.followTotal {
  border-radius: 8rpx;
  padding: 5rpx 10rpx;
  font-size: 24rpx;
}
.followBtned {
  background-color: #fb7299;
  color: #ffffff;
}
.followBtning {
  border: 1rpx solid #fb7299;
  color: #fb7299;
}
.followTotal {
  margin-left: 10rpx;
  background-color: #afb1e2;
  color: #ffffff;
}
.body {
  margin: 20rpx 0;
}
.teamLogo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  overflow: hidden;
  background-color: #ffffff;
}
.teamLogoImage {
  width: 80rpx;
  height: 80rpx;
}
.teamInfo {
  background-color: #aaaaaa;
  border-radius: 2500rpx;
  color: #ffffff;
  height: 80rpx;
  padding: 0 20rpx;
}
.matchTime {
  padding: 0 10rpx;
  font-size: 38rpx;
  font-weight: bold;
}
</style>
